<template>
  <div class="taskbar">
    <!-- 任务栏中间部分 -->
    <div class="taskbarCenter flex" id="taskbar" @click="closeAllPanel">
      <!-- 开始按钮 -->
      <div class="taskbarBtn flex" id="startMenu" @click.stop="showTaskerbarPanel('StartMenu')">
        <img :src="windowsImg" v-ClickAnimation alt="" id="startMenuImg" />
      </div>
      <!-- 搜索按钮 -->
      <div class="taskbarBtn flex" id="search" @click.stop="showTaskerbarPanel('Search')">
        <img :src="searchImg" v-ClickAnimation alt="" id="searchImg" />
      </div>
			<!-- 小工具 -->
			<div class="taskbarBtn flex" id="widget" @click.stop="showWidget">
        <img :src="widgetImg" v-ClickAnimation alt="" id="widgetImg" />
      </div>
			<!-- 控制面板 -->
			<div class="taskbarBtn flex" id="set">
        <img :src="setImg" v-ClickAnimation alt="" id="setImg" />
      </div>
			<!-- 文件资源管理器 -->
			<div class="taskbarBtn flex" id="file">
        <img :src="fileImg" v-ClickAnimation alt="" id="fileImg" />
      </div>
			<!-- 浏览器 -->
			<div class="taskbarBtn flex" id="edge">
        <img :src="edgeImg" v-ClickAnimation alt="" id="edgeImg" />
      </div>
			<!-- 应用商店 -->
			<div class="taskbarBtn flex" id="store">
        <img :src="storeImg" v-ClickAnimation alt="" id="storeImg" />
      </div>
    </div>
    <!-- 任务栏右边部分 -->
    <div class="taskbarRight flex">
      <div class="taskbarBtn" @click="showMoreIconPanel"><i class="el-icon-arrow-down"></i></div>
      <div class="taskbarBtn" @click="showUserPanel"><i class="el-icon-user"></i></div>
      <div class="taskbarBtn" @click="showNotice"><i class="el-icon-message"></i></div>
      <div class="taskbarBtn systemTime" @click="showDateBox"><span>{{time}}</span><span>{{date}}</span></div>
    </div>
    <!-- 开始按钮和搜索按钮弹框 -->
    <transition name="el-zoom-in-top">
      <div v-show="startMenuShow" class="startMenuPanel" @click.stop>
        <component :is='componentTag'></component>
      </div>
    </transition>
    <!-- 任务栏时间弹窗 -->
    <transition name="el-zoom-in-top">
      <div v-show="dateBoxShow" class="systemTimePanel" @click.stop>
        <el-calendar ref="calendar"></el-calendar>
      </div>
    </transition>
  </div>
</template>

<script>
import { computed, reactive, watch, ref, nextTick } from "vue";
import { useStore } from "vuex";
import { pad } from "@/utils"
import StartMenu from '@/components/StartMenu'
import Search from '@/components/Search'

export default {
  components: {
    StartMenu,
    Search
  },
  setup() {
    const store = useStore();
    const componentTag = ref('search')
    const startMenuShow = computed(()=>store.state.taskbar.startMenuShow)
    const dateBoxShow = computed(()=>store.state.taskbar.dateBoxShow)

    //store.dispatch('desktop/changeEdge')
		// 处理亮/暗主题
    let imgUrl = reactive({
      windowsImg: require("@/assets/img/icon/home.png"),
      searchImg: require("@/assets/img/icon/search.png"),
			widgetImg: require("@/assets/img/icon/widget.png"),
			setImg: require("@/assets/img/icon/settings.png"),
			fileImg: require("@/assets/img/icon/explorer.png"),
			edgeImg: require("@/assets/img/icon/edge.png"),
			storeImg: require("@/assets/img/icon/store.png")
    });
    watch(()=>store.state.theme, () => {
      if (store.state.theme === "light") {
        imgUrl.windowsImg = require("@/assets/img/icon/home.png");
        imgUrl.searchImg = "assets/img/icon/search.png";
				imgUrl.widgetImg = "assets/img/icon/widget.png";
				imgUrl.setImg = "assets/img/icon/settings.png";
				imgUrl.fileImg = "assets/img/icon/explorer.png";
				imgUrl.edgeImg = "assets/img/icon/edge.png";
				imgUrl.storeImg = "assets/img/icon/store.png";
      } else {
        ("aaa"); // -> 此处设置暗主题图标
      }
    });

    const closeAllPanel = async() =>{
      store.dispatch('taskbar/closeAllPanel',false)
    }
    // 显示 / 隐藏 开始菜单
    const showTaskerbarPanel = async (panel) =>{
      if(!store.state.taskbar.startMenuShow){
        store.dispatch('taskbar/closeAllPanel',false)
      }

      if(panel == componentTag.value){
        store.dispatch('taskbar/changeStartMenuShow',!store.state.taskbar.startMenuShow)
      }else{
        store.dispatch('taskbar/changeStartMenuShow',true)
      }
      componentTag.value = panel
    }
    // 显示 / 隐藏 通知中心
    const showNotice = async () =>{
      if(!store.state.taskbar.noticeShow){
        store.dispatch('taskbar/closeAllPanel',false)
      }
      
      store.dispatch('taskbar/changeNoticeShow',!store.state.taskbar.noticeShow)
    }
    // 显示 / 隐藏 工具箱
    const showWidget = async () =>{
      if(!store.state.taskbar.widgetShow){
        store.dispatch('taskbar/closeAllPanel',false)
      }
      store.dispatch('taskbar/changeWidgetShow',!store.state.taskbar.widgetShow)
    }
    // 显示 / 隐藏 日期面板
    const showDateBox = async () =>{
      if(!store.state.taskbar.dateBoxShow){
        store.dispatch('taskbar/closeAllPanel',false)
      }
      store.dispatch('taskbar/changeDateBoxShow',!store.state.taskbar.dateBoxShow)
    }

    // 时间数据
    let currentTime = new Date().getTime()
    const date = ref('0000/00/00')
    const time = ref('00:00')

    const fn = () =>{
      currentTime+=1000
      let currentDate = new Date(currentTime);
      time.value = `${pad(currentDate.getHours(), 2)}:${pad(currentDate.getMinutes(), 2)}:${pad(currentDate.getSeconds(), 2)}`
      date.value = `${currentDate.getFullYear()}/${pad(currentDate.getMonth()+1, 2)}/${pad(currentDate.getDate(), 2)}`
    }
    fn()
    setInterval(fn,1000)
    return {
      startMenuShow,
      dateBoxShow,
      ...imgUrl,
      componentTag,
      closeAllPanel,
      showTaskerbarPanel,
      showNotice,
      showWidget,
      showDateBox,
      time,
      date
    };
  },
};
</script>

<style lang='scss' scoped>
.taskbar {
  width: 100%;
  position: relative;
  user-select: none;
}
.taskbarBtn {
  width: 40px;
  height: 40px;
  line-height: 40px;
  transition: all 0.5s;
  user-select: none;
  &:hover {
    background: #fff;
  }
  img {
    height: 24px;
    vertical-align: middle;
  }
}
.taskbarRight{
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  justify-content: flex-end;
  .taskbarBtn{
    width: auto;
    padding: 0 5px;
  }
  .systemTime{
    padding: 0 5px;
    font-size: 12px;
    display: grid;
    grid-template-rows: 50% 50%;
    align-items: center;
    justify-items: center;
  }
}

.startMenuPanel {
  width: 520px;
  height: 536px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(34, 34, 34, 0.25);
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
  z-index:9999;
}

.systemTimePanel{
  z-index:9999;
  box-sizing: border-box;
  width: 360px;
  position: absolute;
  right: 12px;
  top: 40px;
  border-radius: 8px;
  overflow: hidden;
  ::v-deep .el-calendar__body{
    padding: 12px 20px 0;
    font-size: 14px;
  }
  ::v-deep .el-calendar-table{
    transition: none;
    .el-calendar-day{
      height: 52px;
      &:hover{
        background-color: transparent !important;
      }
    }
    td.is-selected{
      background-color: cyan !important;
    }
  }
}
</style>